<!DOCTYPE html>
<html lang="en" xmlns:input="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>用户留言板</title>
    <style>
        body{
            width: 500px;
        }
        header{
            background-color: #ff6633;
            height: 100px;
        }
        div>span{
            margin-left: 220px;
        }
        #input{
            display: none;
        }
    </style>
    <script>
        function $(id){
            return document.getElementById(id);
        }

        /**
         * 打开评论输入框
         */
        function openInput(){
            $("input").style.display="block";
        }
        function submitContent(){
            let contentObj = $("inputBox");
            let newText = document.createElement("p");
            newText.innerText=contentObj.value;
            $("article").append(newText);
            $("input").style.display="none";
        }
    </script>
</head>
<body>
    <div>
        <header>
            <h5>今天王思聪得社交账号被禁言了</h5>
        </header>
        <hr>
        <article id="article">



        </article>
        <span onclick="openInput()">回复</span>
        <aside id="input">
            <textarea name="content" id="inputBox" cols="40" rows="10"></textarea>
            <input type="button" value="评论" onclick="submitContent()">
        </aside>
    </div>
</body>
</html>